<template>
  <div class="forgot-password-page min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4">
    <div class="max-w-md w-full">
      <div class="text-center mb-8">
        <NuxtLink to="/" class="inline-flex items-center space-x-2">
          <div class="i-mdi-code-braces text-5xl text-primary-600" />
          <span class="text-3xl font-bold">代码小库</span>
        </NuxtLink>
        <p class="mt-2 text-gray-600">找回您的密码</p>
      </div>

      <div class="card">
        <div v-if="!emailSent">
          <p class="text-sm text-gray-600 mb-4">
            请输入您的注册邮箱，我们将发送重置密码链接到您的邮箱。
          </p>
          
          <form @submit.prevent="handleSubmit">
            <div class="mb-4">
              <label class="block text-sm font-medium text-gray-700 mb-2">
                邮箱
              </label>
              <input
                v-model="email"
                type="email"
                placeholder="请输入邮箱"
                class="input w-full"
                :class="{ 'border-red-500': error }"
              />
              <p v-if="error" class="text-red-500 text-sm mt-1">
                {{ error }}
              </p>
            </div>

            <button
              type="submit"
              :disabled="loading"
              class="btn-primary w-full py-3"
            >
              {{ loading ? '发送中...' : '发送重置链接' }}
            </button>
          </form>
        </div>

        <div v-else class="text-center">
          <div class="i-mdi-email-check text-6xl text-green-500 mb-4" />
          <h3 class="text-lg font-medium mb-2">邮件已发送</h3>
          <p class="text-sm text-gray-600 mb-6">
            我们已向 <strong>{{ email }}</strong> 发送了重置密码链接，请查收邮件并按照说明操作。
          </p>
          <NuxtLink to="/auth/login" class="btn-primary">
            返回登录
          </NuxtLink>
        </div>
      </div>

      <p class="mt-4 text-center text-sm text-gray-600">
        <NuxtLink to="/auth/login" class="text-primary-600 hover:text-primary-700">
          返回登录
        </NuxtLink>
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { emailRule, requiredRule } from '~/utils/validation'

definePageMeta({
  layout: 'blank',
  middleware: 'guest',
})

const email = ref('')
const error = ref('')
const loading = ref(false)
const emailSent = ref(false)

async function handleSubmit() {
  // 验证邮箱
  const requiredResult = requiredRule(email.value)
  if (requiredResult !== true) {
    error.value = requiredResult
    return
  }
  
  const emailResult = emailRule(email.value)
  if (emailResult !== true) {
    error.value = emailResult
    return
  }
  
  error.value = ''
  loading.value = true

  try {
    // TODO: 调用重置密码 API
    await $fetch('/api/auth/forgot-password', {
      method: 'POST',
      body: { email: email.value },
    })
    
    emailSent.value = true
  } catch (err: any) {
    error.value = err.message || '发送失败，请稍后重试'
  } finally {
    loading.value = false
  }
}

// SEO
useSeoMeta({
  title: '找回密码 - 代码小库',
  robots: 'noindex',
})
</script>